<template>
  <div class="page-box">
    <div class="page">
      <div class="select-box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="所有订单" :name="0"></el-tab-pane>
          <el-tab-pane label="待支付" :name="1"></el-tab-pane>
          <el-tab-pane label="需求待确认" :name="2"></el-tab-pane>
          <el-tab-pane label="拍摄中" :name="10"></el-tab-pane>
          <el-tab-pane label="已完成" :name="8"></el-tab-pane>
        </el-tabs>
      </div>

      <!--列表-->
      <div class="list-box">
        <template v-if="orderList.length>0">
          <div class="list-item" v-for="(item, index) in orderList" :key="'order_'+index">
            <div class="item-header-box">
              <div>
                <span style="padding-right: 20px;">订单号：{{ item.order_no }}</span>
                <el-tag v-if="item.is_sale == 1" type="success">已完成</el-tag>
                <el-tag v-else-if="item.is_promise == 1" type="success">
                  视频制作中
                </el-tag>
                <el-tag v-else-if="item.cancel_status ==0 && !item.words" type="warning">
                  需求确认中
                  <el-tooltip
                      effect="dark"
                      :content="item.words"
                      placement="top"
                  >
                    <el-icon :size="12">
                      <QuestionFilled/>
                    </el-icon>
                  </el-tooltip>
                </el-tag>

                <el-tag v-else-if="item.cancel_status == 2" type="danger">取消中</el-tag>

              </div>
              <div>
                <span style="padding-right: 20px;">订单时间 {{ item.updated_at }}</span>
              </div>
            </div>
            <div class="order-detail-box">
              <el-table
                  ref="multipleTableRef"
                  :data="item.detail"
                  :header-cell-style="{ 'backgroundColor': 'rgb(246, 246, 246)'}"
                  row-key="id"
                  height="100%"
                  style="width: 60%"
              >
                <el-table-column label="意向模特">
                  <template #default="scope">
                    <div class="img-box">
                      <el-image :src="scope.row.goods_info.goods_attr.cover_pic" style="border-radius: 4px;"></el-image>
                      <div style="padding-left: 10px">{{ scope.row.goods_info.name }}</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="单价（每条）" align="right">
                  <template #default="scope">
                    {{ scope.row.goods_info.goods_attr.price }} $
                  </template>
                </el-table-column>
                <el-table-column label="下单数量" align="right">
                  <template #default="scope">
                    {{ scope.row.num }}条
                  </template>
                </el-table-column>
              </el-table>

              <div style="width: 20%">
                <div class="total-table-head">订单总价</div>
                <div class="order-total-box">
                  <div>总计 {{ item.total_pay_source }} USD</div>
                  <div>实际支付 {{ item.total_pay_price }} CNY</div>
                </div>
              </div>

              <div style="width: 20%">
                <div class="total-table-head">操作</div>
                <div class="order-option-box" style="">
                  <el-button v-if="item.status_text == '待付款'" round @click="goToPay(item)" type="primary">立即支付</el-button>
                  <el-button v-if="item.is_promise != 1 && item.cancel_status == 0 && item.is_sale != 1"
                             round @click="openCancel(item)" type="warning">取消订单</el-button>
                  <el-button v-if="item.is_invoice==0 && item.total_pay_price>0" round @click="openDialog(item)">发票申请</el-button>
                </div>
              </div>

              <!--<el-table-->
              <!--    ref="multipleTableRef"-->
              <!--    :data="item.detail"-->
              <!--    :header-cell-style="{ 'backgroundColor': 'rgb(246, 246, 246)'}"-->
              <!--    row-key="id"-->
              <!--    style="width: 20%"-->
              <!--&gt;-->
              <!--  <el-table-column label="下单数量" align="right">-->
              <!--    <template #default="scope">-->
              <!--      {{ scope.row.num }}条-->
              <!--    </template>-->
              <!--  </el-table-column>-->
              <!--</el-table>-->
            </div>
            <!--<div class="order-total-box">-->
            <!--  <div>总计 {{ item.total_pay_source }} USD</div>-->
            <!--  <div>实际支付 {{ item.total_pay_price }} CNY</div>-->
            <!--</div>-->


            <!--<div v-for="orderItem in item.detail" :key="orderItem.id" class="order-detail-box">-->
            <!--  <div>-->
            <!--    <el-image fit="cover" style="width: 60px;height: 60px;border-radius: 4px" :src="orderItem.goods_info.pic_url"></el-image>-->
            <!--    <div>{{ orderItem.goods_info.name }}</div>-->
            <!--    <div>{{ orderItem.goods_info.goods_attr.price }}</div>-->
            <!--    <div>{{ orderItem.goods_info.goods_attr.number }}</div>-->
            <!--  </div>-->

            <!--  <div>总计 {{item.total_price}}</div>-->
            <!--  <div>订单时间 {{item.updated_at}}</div>-->
            <!--  <div>实际支付 {{item.total_pay_price}}</div>-->
            <!--</div>-->
          </div>
        </template>
        <template v-else>
          <div class="center-box">
            <el-empty description="暂无数据"/>
          </div>
        </template>
      </div>


    </div>
    <div class="pagination-box">
      <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :total="orderTotal"/>
    </div>
  </div>

  <el-dialog v-model="dialogStatus" title="发票申请" width="500">

    <div style="padding-right: 20px">
      <el-form v-model="invoiceForm" label-position="right" label-width="100px">
        <el-form-item label="订单号">
          <el-input v-model="invoiceForm.order_no"></el-input>
        </el-form-item>
        <!--<el-form-item label="类型">-->
        <!--  <el-input v-model="invoiceForm.type"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="发票抬头">
          <el-input v-model="invoiceForm.invoice_header" placeholder="请输入发票抬头"></el-input>
        </el-form-item>
        <el-form-item label="税号">
          <el-input v-model="invoiceForm.invoice_code" placeholder="请填写税务登记证编号或社会信用代码"></el-input>
        </el-form-item>
        <el-form-item label="发票金额">
          <el-input v-model="invoiceForm.invoice_price" disabled></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="invoiceSubmit" type="primary">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>

  <!--取消订单-->
  <el-dialog v-model="cancelDialog" title="取消订单" width="500">

    <div style="padding-right: 20px">
      <el-form v-model="cancelForm" label-position="right" label-width="100px">
        <el-form-item label="订单号">
          <el-input v-model="cancelForm.order_no"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="cancelForm.mobile" placeholder="请填写负责人联系电话"></el-input>
        </el-form-item>
        <el-form-item label="取消原因">
          <el-input type="textarea" v-model="cancelForm.remark" placeholder="请输入订单取消原因"></el-input>
        </el-form-item>

        <el-form-item label="">
          <el-button @click="orderCancel" type="primary">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import Https from "@/server";
import {ElMessage, TabsPaneContext} from 'element-plus'
const Router = useRouter();
const activeName = ref(0);
const dialogStatus = ref(false);
const cancelDialog = ref(false);

const invoiceForm = reactive({
  order_no: "",
  type: 1,
  invoice_header: "",
  invoice_code: "",
  invoice_price: "",
});

const cancelForm = reactive({
  order_no: "",
  id: "",
  remark: "",
  mobile: "",
});

const openDialog = (item:any)=>{
  dialogStatus.value = true;
  invoiceForm.order_no = item.order_no;
  invoiceForm.invoice_price = item.total_pay_price;
}

const openCancel = (item:any)=>{
  cancelDialog.value = true;
  cancelForm.order_no = item.order_no;
  cancelForm.id = item.id;
}

const handleClick = (tab: TabsPaneContext) => {
  // console.log(tab.paneName);
  orderList.value = [];
  formData.status = Number(tab.paneName);
  getPageList()
}

interface ORDER_LIST {
  id: number,
  order_no: string,
  detail: Array<any>,
  status_text: string,
  total_price: number
  updated_at: string,
  total_pay_price: number,
  total_pay_source: number,
  is_invoice: number,
  cancel_status: number,
  words: string,
  is_promise: number,
  is_confirm: number,
  is_sale: number,
}

const orderList = ref<ORDER_LIST[]>([]);
const orderTotal = ref(0);

const formData = reactive({
  status: 0,
  pageNum: 1,
})

const getPageList = () => {
  let data = {
    status: formData.status,
    pageNum: formData.pageNum,
    shop_type: 1
  };
  Https.getOrderList(data).then((res: any) => {
    if (res.code === 0) {
      orderList.value = res.data.list;
      orderTotal.value = res.data.pagination.totalCount;
    }
  })
}

// 分页跳转
const handleCurrentChange = (val: number) => {
  formData.pageNum = val;

}
const orderCancel = () => {
  let data = {
    id: cancelForm.id,
    mobile: cancelForm.mobile,
    remark: cancelForm.remark,
  }
  Https.getCancelOrder(data).then((res: any) => {
    if(res.code === 0) {
      cancelForm.id = "";
      cancelForm.mobile = "";
      cancelForm.remark = "";
      cancelForm.order_no = "";
      cancelDialog.value = false;
      ElMessage.success(res.msg);
      getPageList();
    } else {
      ElMessage.error(res.msg);
    }
  })
}

const goToPay = (item: any) => {
  console.log(item);
  // sessionStorage.setItem("orderData", JSON.stringify([goods]))
  Router.push({name: "create"});
}

// 发票申请
const invoiceSubmit = ()=>{

  Https.postInvoiceSubmit(invoiceForm).then((res:any) => {
    if(res.code == 0) {
      dialogStatus.value = false;
      invoiceForm.order_no = "";
      invoiceForm.invoice_price = "";
      invoiceForm.invoice_code = "";
      invoiceForm.invoice_header = "";
      ElMessage.success(res.msg);
      getPageList();
    } else {
      ElMessage.error(res.msg);
    }
    // console.log(res)
  })
}

onMounted(() => {
  getPageList();
})

</script>
<style scoped lang="scss">
.page-box {
  height: 100%;

  .page {
    position: relative;
    box-sizing: border-box;
    height: calc(100% - 70px);
    overflow-y: auto;
    background-color: transparent;
    color: var(--text-color);
  }
}

.tabs {
  padding: 0;
  height: 40px;

  .tab {
    width: 120px;
    font-size: 15px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    line-height: 36px;
    padding: 0 10px;
    color: var(--text-gray-color);
    background-color: #e9ebf1;
    cursor: pointer;
    margin-top: 3px;
  }

  .tab.active {
    background-color: #fff;
    color: var(--el-color-primary);
    cursor: auto;
    font-size: 16px;
    line-height: 40px;
    margin-top: 0;
  }
}


.list-box {
  padding: 40px 20px 20px;
  background-color: #fff;
  width: 100%;
  border-radius: 0 0 14px 14px;
  display: flex;
  flex-wrap: wrap;
  min-height: 552px;
}

.list-item {
  width: 100%;
  margin-bottom: 30px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--el-color-primary-light-7);

  .item-header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 20px;
    background-color: var(--el-color-primary-light-7);
    margin-bottom: 10px;

    div{
      line-height: 30px;
      display: flex;
      align-items: center;
    }
  }
}

.order-detail-box {
  padding: 0 20px 20px 20px;
  display: flex;
}

//分页
.pagination-box {
  padding: 20px 20px 0;
  display: flex;
  justify-content: flex-end;
}

.img-box {
  display: flex;
  align-items: center;

  .el-image {
    width: 60px;
    height: 60px;
  }
}

.order-total-box {
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  height: calc(100% - 40px);
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
}

.total-table-head {
  background-color: rgb(246, 246, 246);
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  color: #909399;
}

.order-option-box {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: calc(100% - 40px);
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  justify-content: center;
}

</style>